<template>
  <div class="bg">
    <nav-com
      title="积分明细"
      :showView='true'
      @back="backHandler()"
    ></nav-com>
    <van-tabs
      v-model="active"
      @change="change(active)"
    >
      <van-tab
        v-for="(item,index) in tabList"
        :key="index"
        :title="item.title"
      >
      <div style="margin:10px 0 0 15px;" @click="changeDate">{{currentDate | yymmDateFormat}}</div>
        <div
          v-if="dataList.length == 0"
          style="margin:50px;text-align:center"
        >
          --暂无数据--
        </div>
        <div
          v-else
          class="dataList"
          v-for="item in dataList"
          :key="item.id"
        >
          <div class="time">{{item.createtime }}</div>
          <div class="name">
            <div>
              <div class="title">{{item.memo}}</div>
              <div
                class="title"
                v-if="item.type==9"
                style="margin-top:5px"
              >{{item.after>item.before?'来自':'转给'}}--{{item.mobile}}</div>
            </div>
            <div class="num">
              {{item.after>item.before?'+':'-'}}{{item.score}}
            </div>
          </div>

        </div>
      </van-tab>
    </van-tabs>
    <van-overlay
      :show="showTime"
      @click="show = false"
    >
      <van-datetime-picker
        class="time-picker"
        v-model="currentDate"
        type="year-month"
        title="选择年月"
        :min-date="minDate"
        :max-date="maxDate"
        :formatter="formatter"
        @cancel='showTime=false'
        @confirm='confirm'
      />
    </van-overlay>
  </div>
</template>

<script>
import moment from "moment";
import navCom from "@/component/nav";
import { scoreRecord } from "@/api/api";
export default {
  components: {
    navCom,
  },
  filters: {
    dateFormat(val) {
      return moment(val * 1000).format("YYYY-MM-DD");
    },
    yymmDateFormat(val) {
      return moment(val).format("yyyy年MM月");
    }
  },
  data() {
    return {
      showTime: false,
      minDate: new Date((2000, 1, 1)),
      maxDate: new Date(),
      currentDate: new Date(),
      title: "",
      dataList: [],
      titleType: {
        7: "中军值到账记录",
        6: "中军值转赠记录",
        5: "中军值兑换记录",
      },
      tabList: [
        { id: 7, title: "全部" },
        { id: 6, title: "积分转赠" },
        { id: 5, title: "积分兑换股票" },
      ],
      page: 1,
      active: 0,
    };
  },
  mounted() {
    // let type = this.$route.params.type;
    // this.title = this.titleType[type];
    this.change("");
  },
  methods: {
    confirm(value) {
      this.showTime = false;
      this.currentDate = value;
      console.log(8888, this.currentDate);
    },
    formatter(type, val) {
      if (type === "year") {
        return `${val}年`;
      } else if (type === "month") {
        return `${val}月`;
      }
      return val;
    },
    // 改变查询月份
    changeDate() {
      this.showTime = true;
    },
    change(active) {
      this.dataList = [];
      this.page = 1;
      if (active == 0) {
        this.initData("");
      } else if (active == 1) {
        this.initData(6);
      } else if (active == 2) {
        this.initData(8);
      }
    },
    backHandler() {
      this.$router.go(-1);
    },
    initData(type) {
      let queryData = {
        offset: this.page,
        limit: 10,
        type,
      };
      scoreRecord(queryData)
        .then((res) => {
          if (res.data.code == 1) {
            this.dataList = [...res.data.data, ...this.dataList];
            if (res.data.data.length > 0) {
              this.page += 1;
              this.initData(type);
            }
          }
        })
        .catch((err) => {});
    },
  },
};
</script>

<style scoped>
.time-picker {
  position: absolute;
  bottom: 0;
  width: 100%;
}
.bg {
  position: relative;
  background: #f2f3f7;
  min-height: 100vh;
}
.dataList {
  background: #fff;
  margin: 10px 20px;
  padding: 5px 20px;
  line-height: 10vw;
  border-radius: 8px;
}
.dataList .name {
  display: flex;
  justify-content: space-between;
  align-content: center;
  align-items: center;
}
.dataList .title {
  width: 60vw;
  font-size: 15px;
  word-wrap: break-word;
}
.dataList .time {
  color: #ccc;
  font-size: 14px;
  margin-top: 0px;
  border-bottom: 1px solid #eee;
}
.dataList .num {
  color: #fe4b20;
  font-size: 22px;
}
</style>